<template>
  <a-modal
    :title='title'
    :width='1280'
    :visible='visible'
    :confirmLoading='confirmLoading'
    :maskClosable='false'
    @ok='handleOk'
    @cancel='handleCancel'
    cancelText='关闭'
    wrapClassName='ant-modal-cust-warp'
    style='top:5%;height: 85%;overflow-y: hidden'>
    <a-spin :spinning='confirmLoading'>

      <!-- 查询区域 -->
      <a-tag v-for='(column,index) in dateList' @click='selectDate(column.date,column.week,index)'
             :color="index == activeIndex ? 'pink' : ''"
             style='height: 60px;margin-right: 5px;margin-right:15px;cursor:pointer;'>
        {{ column.title }}
      </a-tag>


      <a-row style='margin-top: 10px;'>
        <a-table
          ref='table'
          size='middle'
          bordered
          rowKey='id'
          :columns='columns'
          :dataSource='dataSource'
          :pagination='ipagination'
          :loading='loading'
          :rowSelection='{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}'
          @change='handleTableChange'>

          <template
            v-for="col in ['timeValueStr','appointmentType']"
            :slot='col'
            slot-scope='text, record, index'
          >
            <div :key='col' v-if="col=='timeValueStr'">
              <a-select v-model='record.timeValueIds' mode='multiple' v-if='record.editable' style='width: 200px' @change='handleChange' >
                <a-select-option value="">请选择</a-select-option>
                <a-select-option v-for='item in record.timeValueList' :key='item.key' :value='item.key'>{{ item.label}} </a-select-option>
              </a-select>
              <template v-else>
                {{ text }}
              </template>
            </div>
            <div :key='col' v-if="col=='appointmentType'">
              <a-select v-model='record.appointmentType' v-if='record.editable' style='width: 200px' @change='handleChange' >
                <a-select-option value="1">门诊挂号</a-select-option>
                <a-select-option value="2">出诊到家</a-select-option>
              </a-select>
              <template v-else>
                {{ text=='1'?"门诊挂号":"出诊到家" }}
              </template>
            </div>
          </template>

          <template slot='action' slot-scope='text, record, index'>
            <div class='editable-row-operations'>
            <span v-if='record.editable'>
              <a @click='() => save(record.id)'>保存</a>
              <a-popconfirm title='取消编辑吗?' @confirm='() => cancel(record.id)' style='padding-left: 5px'>
                <a>取消</a>
              </a-popconfirm>
            </span>
              <span v-else>
                  <a :disabled="editingKey !== ''" @click='() => edit(record.id)'>编辑</a>
                </span>
            </div>
          </template>

        </a-table>
      </a-row>

    </a-spin>
  </a-modal>
</template>

<script>
import { getAction, httpAction, postAction, putAction } from '@/api/manage'
import { queryMyDepartTreeList } from '@api/api'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import moment from 'moment'

export default {
  name: 'DepartEditModal',
  mixins: [JeecgListMixin],
  data() {
    return {
      title: '新增排班计划',
      visible: false,
      loading: false,
      confirmLoading: false,
      disableMixinCreated: true,
      queryParam: {},
      /* 分页参数 */
      dateIpagination: {
        current: 1,
        pageSize: 5,
        total: 0
      },
      editingKey: '',
      dataSource: [],
      // 表头
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function(t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '职称',
          align: 'center',
          dataIndex: 'employeeName',
          width: 200

        }, {
          title: '排班时间',
          align: 'center',
          dataIndex: 'timeValueStr',
          width: 300,
          scopedSlots: { customRender: 'timeValueStr' }
        },
        {
          title: '出诊类型',
          align: 'center',
          dataIndex: 'appointmentType',
          width: 200,
          scopedSlots: { customRender: 'appointmentType' }
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' },
          width: 200

        }
      ],
      url: {
        list: '/his/scheduling/week/list'
      },
      dateList: [],
      activeIndex: 0,
      schedulingCode: '',
      currentChoseDate: ''
    }
  },
  created() {
  },
  methods: {
    moment,
    handleChange(value) {

    },
    selectDate(date, week, index) {
      this.activeIndex = index
      this.currentChoseDate = this.dateList[index].date
      this.queryParam.date = this.currentChoseDate
      this.loadData(1)
    },
    edit(id) {
      const newData = this.dataSource
      const target = newData.find(item => id === item.id)
      console.log(target)
      this.editingKey = id
      if (target) {
        target.editable = true
        this.dataSource = newData
      }
    },
    save(id) {
      const newData = this.dataSource
      const target = newData.find(item => id === item.id)
      if (target) {
        putAction('/his/scheduling/', { 'id': id, 'timeValueList': target.timeValueIds ,'appointmentType': target.appointmentType }).then((res) => {
          if (res.success) {
              target.timeValueStr = res.result
          }
        })

        target.editable = false
        this.dataSource = newData
      }
      this.editingKey = ''
    },
    cancel(id) {
      const newData = this.dataSource
      const target = newData.find(item => id === item.id)
      this.editingKey = ''
      if (target) {
        target.editable = false
        this.dataSource = newData
      }
    },
    loadDateData(pageNo) {
      const that = this
      getAction('/his/scheduling/column/' + this.schedulingCode + '/' + pageNo).then((res) => {
        if (res.success) {
          this.dateList = res.result.records || res.result
          if (res.result.total) {
            that.dateIpagination.total = res.result.total
            that.dateIpagination.current = res.result.pageNo
            that.currentChoseDate = that.dateList[0].date
            that.queryParam.date = that.currentChoseDate
            that.queryParam.schedulingCode = that.schedulingCode
            this.loadData(1)
          } else {
            that.dateIpagination.total = 0
          }
        } else {
          that.$message.warning(res.message)
        }
      })
    },
    handleChangePage(page, pageSize) {
      this.loadDateData(page - 1)
    },
    add(record) {
      const that = this
      this.schedulingCode = record.schedulingCode
      that.loadDateData(0)
      that.visible = true
    },
    close() {
      this.editingKey = ''
      this.$emit('close')
      this.visible = false
    },

    handleOk() {
      this.confirmLoading = false
      this.close()
    },
    handleCancel() {
      this.close()
    }
  }
}
</script>

<style scoped>

</style>